<template>
  <div id="d3-canvas">
    <svg :width="w" :height="1000"></svg>
  </div>
</template>
<script>
import * as d3 from 'd3'
export default {
  name: 'D3Canvas',
  props: {
    w: {
      required: true
    },
    h: {
      required: false,
      default: 500
    }
  },
  mounted () {
    let div = d3.select('#d3-canvas')
    let svg = div.select('svg')
    svg.append('circle')
      .attr('cx', this.w / 2)
      .attr('cy', 100)
      .attr('r', 50)
      .style('fill', 'steelblue')
  }
}
</script>
<style scoped>
</style>
